<template>
    <div>
      <Row>
        <i-col span="24" class-name="y_query_right">
          <Button type="info"  to="/product/tagBatch" v-has=tRole.PRODUCT_3_101 >批量为产品增删角标</Button>
        </i-col>
        <divider></divider>
      </Row>

      <Row>

        <i-col span="24" class-name="y_query_right">
          <Button type="primary" icon="md-search" @click="search()" class="y_condition">查询</Button>
          <Button type="primary" icon="md-add" class="y_condition" v-has=tRole.PRODUCT_3_100 @click="tabAdd">新增角标
          </Button>
        </i-col>

      </Row>
<!--      <hr style="margin-top: 20px;margin-bottom: 20px;border: 0.5px #f1f1f1 solid;">-->

      <Row>
        <div class="tip_div" v-show="tabList.length<=0">
          <strong>操作提示 :  </strong>
          <br><br>
          <p>1. 产品角标是一张图，尽量使用png的半透明的图</p>
          <p>2. 产品角标默认显示在产品列表页的左上角</p>
          <p>3. 系统会自动为三天内上传的新产品添加New的角标图</p>
        </div>
      </Row>

      <!--表格和分页-->
<!--      <Table stripe border class="base_table" ref="selection"  v-show="tabList.length>0"
             :columns="tabTableTitles" :data="tabList"
             no-data-text="暂无数据"></Table>-->
      <List style="border-top: 1px solid #e8eaec;border-bottom: 1px solid #e8eaec;margin-top: 1rem;">
        <list-item class="list_item" v-for="(item,index) in tabList">
          <div style="width:100%;"  >
            <Row type="flex" justify="space-between" align="center">
              <i-col flex="auto" style="text-align: left; "  >
                <img :src="yunPath+item.icon" style="height: 47px; margin: 0.2rem 0.5rem" />
                <KeyValueView>#{{index+1}}</KeyValueView>
                <KeyValueView title="标签名称">{{item.name}}</KeyValueView>
                <KeyValueView  title="创建时间" >{{ $tiyBJTime(item.createtime) }}</KeyValueView>
              </i-col>
              <i-col v-has=tRole.PRODUCT_3_205 flex="auto" style="text-align: right">
                <Button ghost size="small" icon="md-create" type="primary" @click="editTab(index)" style="margin-right: 0.5rem">编辑</Button>
                <Button ghost size="small" icon="md-trash" type="error"  @click="deleteTab(index)" >删除</Button>
              </i-col>
            </Row>
          </div>
        </list-item>
      </List>

      <Modal
        v-model="addModal.isShow"
        :title="addModal.title"
        :mask-closable="false"
        @on-ok="saveTab"
        :loading="addModal.isLoading">
        <Form :model="param.tab" :label-width="100" :rules="ruleTab"
              ref="tabForm"  style="margin: 1rem 0px" class="modal_newuser_form"  >
          <div class="modal_base_div" style="">
            <Row>
              <i-col span="22">
                <FormItem label="角标名称" prop="name">
                  <Input v-model.trim="param.tab.name" placeholder="请输入"
                         class="form_step"></Input>
                </FormItem>
              </i-col>
            </Row>
            <Row>
              <FormItem label="图标 : " prop="icon">
                <Button type="primary" class="" @click="selectImages(false,true)">
                  选择图片
                </Button>
                <Button type="error" icon="md-trash" v-show="'' != param.tab.icon"
                        @click="closeImgShow" style="margin-left: 1rem">
                  删除图片
                </Button>
                <Input v-model.trim="param.tab.icon" style="display: none"></Input>
              </FormItem>
            </Row>
            <Row>
              <FormItem label="" v-if="'' != param.tab.icon" style="width: 100%;">
                  <i-col span="4">
                    <img :src="yunPath + param.tab.icon"  width="100%" style="padding: 0.2rem;border: solid 1px #f1f1f1;background: #fafafa" />
                  </i-col>
                  <i-col span="4"></i-col>
              </FormItem>
            </Row>
          </div>
        </Form>
      </Modal>

      <!--图片选择框-->
      <Modal
        v-model="status.modalImage.isShow"
        title="单击选择图片"
        :styles="{top: '20px',bottom:'20px',}"
        width="70%"
        height="1000">
        <div slot="footer"></div>
        <a-image :hideleft="true"
                 @cancelClicked="status.modalImage.isShow=false"
                 @sureClicked="seletedImage" ></a-image>
      </Modal>

      <!--确认弹出框-->
      <Modal
        v-model="status.modalDelete.isShow"
        title="删除角标"
        :loading="status.modalDelete.isLoading"
        @on-ok="actionDelete">
        <br>
        <p>确定删除该角标吗?</p>
        <br>
      </Modal>

    </div>
</template>

<!--javascript 代码-->
<script>
  import ICol from "../../../node_modules/view-design/src/components/grid/col";
  import tiyData from "./js/tab/tab_data";
  import {webList,init,save,add,edit,actionDelete} from "./js/tab/tab_fun";
  import AImage from "../image/ImageSelect.vue";
  import tiyDataImage from "../image/js/select/image_data"
  import KeyValueView from "../widgets/KeyValueView";

  import {
    imageInit,
    webImageAdd,
    webImageDelete,
    webImageList,
    webFolderListByParentId
  } from "../image/js/select/image_funs"
    export default {
      components: {ICol,AImage,KeyValueView},
        data(){
            return {
              tRole:{
                PRODUCT_3_100:"PRODUCT-3-100",
                PRODUCT_3_101:"PRODUCT-3-101",
                PRODUCT_3_205:"PRODUCT-3-205",
              },
              tabList:tiyData.tData.tabList,
              tabTableTitles:tiyData.listTableTitles(this),
              addModal:tiyData.addModal,
              param:tiyData.tParam,
              status:tiyData.tStatus,
              ruleTab:tiyData.addModal.rules,
              yunPath: this.$store.getters.imgPrefix,
            }
        },
      computed : {

      },
      methods:{

        editTab(index){
          edit(index,tiyData);
        },
        tabAdd(){
          add(this,tiyData);
        },
        saveTab(){
          save(this,tiyData);
        },
        deleteTab(index){
          tiyData.tStatus.modalDelete.isShow=true;
          tiyData.tStatus.modalDelete.deleteId = tiyData.tData.tabList[index].id;
        },
        actionDelete(){
          actionDelete(this,tiyData);
        },
        selectImages(showChooseSingle, isSingle){
          imageInit(this, tiyDataImage, showChooseSingle, isSingle, 4);
          // tiyData.tStatus.selectImageType = type;
          // tiyDataImage.tParams.folderList.productCode = tiyData.tParam.paramProduct.productCode;
          tiyData.tStatus.modalImage.isShow = true;
          webImageList(this, tiyDataImage);
        },
        seletedImage(selectedImages){
            tiyData.tStatus.modalImage.isShow = false;
          tiyData.tParam.tab.icon = selectedImages[0].yunKey;
        },
        closeImgShow(){
          tiyData.tParam.tab.icon='';
        },
        search() {
          webList(this,tiyData);
        }
      },

      mounted() {
        init();
        // webList(this,tiyData);
      }
    }
</script>

<!--css样式-->
<style lang="less" scoped>
@import  (once,optional)  "../css/base";

.list_item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.list_item:hover {
  background: @tiySectionColor;
}
</style>
